<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'发薪记录'" :autoBack="true" leftIconColor="$uni-text-color"
        :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="list_item">
                <view class="title">{{tags}}</view>
                <view class="message_box">
                    <view class="image">
                        <image :src="`${baseUrl}`+userInfo.avatar" mode="scaleToFill" />
                    </view>
                    <view class="company">我发布的任务</view>
                    <view class="inviter">{{ userInfo.group.name }}</view>
                </view>
            </view>
            <scroll-view scroll-y class="area" :style="{ height: `calc(100vh - ${safeAreaInsets?.top + 160}px)` }"
            @scrolltolower='listScrolltolower' show-scrollbar="true" :refresher-enabled="isOpenRefresh"
            :refresher-triggered="triggered" :refresher-threshold="100" refresher-background="white"
            @refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
            @refresherabort="onAbort" @scroll="onScroll" v-if="payrollList.length">
                
                <view class="scroll_list_item" v-for="(item, index) of payrollList" :key="index">
                    <view class="position">{{ item.title }}</view>
                    <view class="time_state_box">
                        <view class="time_state">
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">开始日期：</text>
                                    <text class="state_await">{{item.date }}</text>
                                </view>
                            </view>
                            <view class="time_box">
                                <view class="blue"></view>
                                <view class="time">班次时间： {{ item.start_time }} , {{ item.end_time }}</view>
                            </view>
                            <view class="state_data">
                                <view class="croci"></view>
                                <view class="state_box">
                                    <text class="state_title">开始状态：</text>
                                    <text :class="item.state == 2 ?'state_already': item.state == 3||item.state == 4 ?'state_gray':'state_await' ">
                                        {{ item.state_name }}
                                    </text>
                                </view>
                            </view>
                            <!-- <view class="item_pub">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
                                <view class="blue">用工需求</view>
                            </view>
                            <view class="item_cont">
                                <view class="demand">
                                <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                                </view>
                            </view> -->
                            <!-- <view class="time_box">
                                <view class="blue"></view>
                                <view class="time">需求人数： {{ item.man_num }}人 / {{ item.woman_num }}人</view>
                            </view> -->
                            
                                <view class="item_pub">
                                    <image :src="`${baseUrl}/uploads/uniapp_image/user_v1/Myinvite_icon_time备份@2.png`" mode="scaleToFill"/>
                                    <view class="blue">用工需求</view>
                                </view>
                                <view class="demand">
                                    <view class="u-content">
                                    <u-parse :content="item.demand" :show-with-animation="true"></u-parse>
                                    </view> 
                                </view>

                        </view>
                    </view>
                    <view class="button_box">
                        <view class="button1" @tap="skipPersonnelList(item)">
                            <view class="image">
                                <image :src="`${baseUrl}/uploads/uniapp_image/staff/faxinjilu_icon_chakanfaxin.png`" mode="scaleToFill" />
                            </view>
                            <view class="text">查看人员发薪记录</view>
                        </view>
                    </view>
                </view>
                
            
                <!-- 加载中 && 没有更多数据了 -->
                <view>
                    <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                    ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
        </view>
    </s-layout>
</template>
<script setup>
    import { baseUrl } from '@/sheep/config';
    import { onLoad, onShow } from "@dcloudio/uni-app";
    import { reactive, ref, computed } from "vue";
    import tools from '@/sheep/helper/tools.js';
    import sheep from "@/sheep";
    import { formatDate } from '@/utils/fn.js';
    import { showShareModal } from '@/sheep/hooks/useModal';
    const userInfo = computed(() => sheep.$store('user').userInfo);
    // 获取系统信息
    const { safeAreaInsets } = uni.getSystemInfoSync();

    const tags = ref()
    const department_id = ref()
    onLoad((option) => {
        tags.value =  option.tags
        department_id.value = option.department_id
        getRemitList()
    });
    // 发新记录请求数据
    const payrollList = ref([])
    //数据请求
    const listPage = ref()
    const listlast_page = ref();
    const listpagenumber = ref(1);
    const getRemitList = async () => {
        let params = {
            department_id:department_id.value,
            page: listpagenumber.value,
        };
        const res = await sheep.$api.project.getRemitListDepartmentid(params);
        payrollList.value = [...payrollList.value, ...res?.data.rows];
        payrollList.value.forEach((item)=>{
            if(item.state == 0){
                item.state_name = '待开始'
            }else if(item.state == 1){
                item.state_name = '进行中'
            }else if(item.state == 2){
                item.state_name = '已结束'
            }else if(item.state == 3){
                item.state_name = '已终止'
            }else if(item.state == 4){
                item.state_name = '已作废'
            }else{
                item.state_name = '全部'
            }
        })
        listPage.value = res.data.current_page
        listlast_page.value = res.data.last_page
    }

    // 滚动触底事件 + 分页处理
    const loadmoreRef = ref()
    //滚动触底
    const listScrolltolower = () => {
        loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
        listpagenumber.value += 1;
    } else {
        return;
    }
        getRemitList();
    };
    // 查看人员列表 
    const skipPersonnelList = (item) => {
        sheep.$router.go('/subpackage/staff/user/payroll_record/order_details', {
            id: item.id
        })
    }
    // 页面下拉刷新
    const freshing = ref(false)
    const triggered = ref(false)
    const isOpenRefresh = ref(true)  // 是否开启下拉
    // 自定义下拉刷新控件被下拉
    const onPulling = (e) => {
        if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
        triggered.value = true;
    }
    // 自定义下拉刷新被触发
    const onRefresh = () => {
        if (freshing.value) return;
        freshing.value = true;
        setTimeout(() => {
            listpagenumber.value = 1;
            payrollList.value = []
            triggered.value = false;
            freshing.value = false;
            getRemitList();
        }, 500);
    }
    // 自定义下拉刷新被复位
    const onRestore = () => {
        triggered.value = 'restore'; // 需要重置
        // console.log("onRestore");
    }
    // 自定义下拉刷新被中止
    const onAbort = () => {
        // console.log("onAbort");
    }
</script>

<style scoped lang="scss">
    page {
        width: 100%;
        height: 100%;
    }

    // 版心
    .area {
        width: calc(100% - 40rpx);
        margin: 0 20rpx;
    }

    .list_item {
        margin-bottom: 20rpx;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        padding: 40rpx 30rpx 0rpx 30rpx;
        border-top: 2rpx solid #fdfdfd;
        .title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 36rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
            margin-bottom: 20rpx;
        }
        .time_box {
            display: flex;
            align-items: center;
            height: 50rpx;
            .surface {
                width: 26rpx;
                height: 26rpx;
                margin-right: 10rpx;
                image {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                }
            }
            .time {
                font-family: PingFangSC;
                color: #666666;
                font-weight: 500;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }

        .message_box {
            display: flex;
            align-items: center;
            padding-bottom: 30rpx;
            .image {
                width: 44rpx;
                height: 44rpx;
                margin-right: 10rpx;
                display: flex;
                align-items: center;
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 16.5px;
                }
            }
            .company {
                font-family: PingFangSC;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
                font-size: 22rpx;
                font-style: normal;
                text-decoration: none;
                margin-right: 18rpx;
            }
            .inviter {
                border-radius: 4px;
                background-color: #F4F7FF;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 20rpx;
                font-style: normal;
                text-decoration: none;
                padding: 5rpx;
            }
        }
    }

    .scroll_list_item {
        padding: 30rpx 0 0 0;
        border-radius: 8px;
        background-color: #FFFFFF;
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 20rpx;
        .position {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-big;
            font-style: normal;
            text-decoration: none;
            padding-bottom: 30rpx;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
        }
        .quantity_box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
            .quantity {
                width: calc(50% - 30rpx);
                padding-bottom: 30rpx;
                .person_number {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: $uni-font-weight;
                    font-size: $uni-font-size-sm;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin-top: 30rpx;
                    margin-bottom: 10rpx;
                }
                .gender {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 22rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 10rpx 0 12rpx 0;
                }
                .agent_sum {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .agent_sum_left {
                    font-family: PingFangSC;
                    color: #B3B3B3;
                    font-weight: 500;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                    white-space: nowrap;
                }
                .count_man {
                    font-family: PingFangSC;
                    color: #FF0000;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
                .count_woman {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: center;
                    margin: 0 30rpx;
                }
            }
        }
        .time_state_box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 20rpx;
            border-bottom: 1px solid #EFEFEF;
            .time_state {
                width: 100%;
                .time_box {
                    display: flex;
                    align-items: center;
                    height: 50rpx;
                    .blue {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: $uni-color-primary;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .time {
                        font-family: PingFangSC;
                        color: $uni-text-color;
                        font-weight: $uni-font-weight;
                        font-size: $uni-font-size-sm;
                        font-style: normal;
                        text-decoration: none;
                    }
                }
                .state_data {
                    display: flex;
                    align-items: center;
                    height: 50rpx;
                    .croci {
                        width: 10rpx;
                        height: 10rpx;
                        background-color: #FF6120;
                        border-radius: 50%;
                        margin-right: 12rpx;
                    }
                    .state_box {
                        display: flex;
                        align-items: center;
                        .state_title {
                            font-family: PingFangSC;
                            color: $uni-text-color;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_await {
                            font-family: PingFangSC;
                            color: $uni-color-primary;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_gray{
                            font-family: PingFangSC;
                            color: #8a8a8a;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                        .state_already {
                            font-family: PingFangSC;
                            color: #FF6120;
                            font-weight: $uni-font-weight;
                            font-size: $uni-font-size-sm;
                            font-style: normal;
                            text-decoration: none;
                        }
                    }
                }
            }

            .examine {
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: $uni-font-size-sm;
                font-style: normal;
                text-decoration: none;
            }
        }

        .button_box {
            display: flex;
            align-items: center;
            justify-content: center;

            .button1 {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 30rpx 0 30rpx 20rpx;

                .text {
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: $uni-font-weight;
                    font-size:$uni-font-size-26;
                    font-style: normal;
                    text-decoration: none;
                }
            }

            .image {
                width: 28rpx;
                height: 28rpx;
                margin-right: 12rpx;
                display: flex;
                align-items: center;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .yellow {
        color: #FF6120;
        font-weight: $uni-font-weight;
    }

    .blue {
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
    }

    :deep(.u-tabs__wrapper__nav__item) {
        width: calc(100% / 4);
        padding: 0;
    }

    :deep(.u-tabs__wrapper__nav__line) {
        width: 30rpx !important;
        height: 8rpx !important;
        border-radius: 4rpx !important;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
    }

    :deep(.u-tabs__wrapper__nav__item.data-v-0546c3e4) {
        padding: 0 !important;
    }

    .item_pub{
        display: flex;
        align-items: center;
        height: 50rpx;
        .nowrap{
            width: 90%;
            color: #666666;
            font-weight: 400;
            font-size:$uni-font-size-26;
        }
        .gray{
            width: 90%;
            color: #666666;
            font-weight: 400;
            font-size:$uni-font-size-26;
            display: flex;
        }
        .blue{
            font-family: PingFangSC;
            color: #0038F7;
            font-weight: 600;
            font-size: 26rpx;
            font-style: normal;
            text-decoration: none;
            text-align: left;
        }
        image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 10rpx;
        }
    }
    .demand {
        margin: 20rpx 0;
        width: calc(100% - 40rpx);
        border-radius: 8px;
        background-color: #F8F9FF;
        padding: 20rpx;
        color: #333;
        font-weight: 600;
        font-size: 26rpx;
    }
</style>